<template>
  <div> 
    <!-- 每个组件得根标签只能有1个 -->
    <!-- 这里头放的是html -->
      <div id="odiv">11sdasdsdsqwsqwsqwsqw1</div>
      <div v-for="(item,index) in arr" :key="index">
        <span id="span">{{item.Name}}</span> 
        <img :src="item.CoverPhoto" alt="">
      </div>
  </div>
 
</template>

<script>

// 模板得快捷键是按住w
// 写js
// 生命周期 // 某些特定得时间内自动执行得函数，不需要手动调用去执行得函数
// 在这个组件中(.vue文件中)，this指向当前组件的实例
import axios from "axios"
export default {
   data(){
     return {
       name:"zhangsan",
       arr:[]
     }
   },
   methods: {
     setname() {
        console.log(this) //当前组件的实例，VueComponent
        this.name = "lisi"
     },
   },
  // 胎儿
  beforeCreate() { // 组件创建前
     console.log("beforecreate",console.log(this))
  },
  // 出生了,this理解为户口本，
  created(){ // 调接口得操作
           let odiv= document.getElementById("odiv")
        console.log("create",this,odiv)
        axios.get("https://baojia.chelun.com/v2-car-getMasterBrandList.html").then(res=>{
          console.log(res);
          this.arr = res.data.data
        })
  },
  // 上学前
  // beforeMount(){ // 组件挂载前
  //       console.log("befoermountd")
  // },
  // 上学之后
  mounted() { // 组件挂载后 ,
      let odiv= document.getElementById("odiv")
      // console.log(spans);
        console.log("mounted",this,odiv)

  },

}
</script>

<style>
/* 写样式 */
.h4 {
  color: red;
  font-size: 20px;
}
</style>